<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 创建画布
    const canvas = document.createElement( 'canvas' );
    const ctx = canvas.getContext( '2d' );
    document.body.appendChild( canvas );

    // 设置画布大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 定义小球类
    class Ball {
        constructor( x, y, radius, color ) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.color = color;
            this.dx = Math.random() - 0.5; // 横向速度
            this.dy = Math.random() - 0.5; // 纵向速度
        }

        draw () {
            ctx.beginPath();
            ctx.arc( this.x, this.y, this.radius, 0, Math.PI * 2 );
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.closePath();
        }

        update ( balls ) {
            this.x += this.dx;
            this.y += this.dy;

            // 边界检测
            if ( this.x + this.radius > canvas.width || this.x - this.radius < 0 ) {
                this.dx = -this.dx;
            }
            if ( this.y + this.radius > canvas.height || this.y - this.radius < 0 ) {
                this.dy = -this.dy;
            }

            // 碰撞检测
            for ( let i = 0; i < balls.length; i++ ) {
                if ( this !== balls[i] ) {
                    const dx = this.x - balls[i].x;
                    const dy = this.y - balls[i].y;
                    const distance = Math.sqrt( dx * dx + dy * dy );

                    if ( distance < this.radius + balls[i].radius ) {
                        // 碰撞处理
                        const angle = Math.atan2( dy, dx );
                        const targetX = this.x + Math.cos( angle ) * ( this.radius + balls[i].radius );
                        const targetY = this.y + Math.sin( angle ) * ( this.radius + balls[i].radius );
                        const ax = ( targetX - balls[i].x ) * 0.2;
                        const ay = ( targetY - balls[i].y ) * 0.2;

                        this.dx -= ax;
                        this.dy -= ay;
                        balls[i].dx += ax;
                        balls[i].dy += ay;
                    }
                }
            }

            this.draw();
        }
    }

    // 创建小球实例
    const balls = [];
    for ( let i = 0; i < 100; i++ ) {
        const radius = Math.random() * 20 + 5;
        const x = Math.random() * ( canvas.width - radius * 2 ) + radius;
        const y = Math.random() * ( canvas.height - radius * 2 ) + radius;
        const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
        balls.push( new Ball( x, y, radius, color ) );
    }

    // 动画循环
    function animate () {
        ctx.clearRect( 0, 0, canvas.width, canvas.height );

        for ( let i = 0; i < balls.length; i++ ) {
            balls[i].update( balls );
        }

        requestAnimationFrame( animate );
    }

    animate();
</script>

</html>